<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增布局标签</title>
</head>
<body>
<!--之前布局标签有:div,p,span-->
<!--
H5新增的标签(有了语义的div):
  header:整个页面,或者部分区域的头部
  footer:整个页面,或者部分区域的底部
  nav:导航
  article:文章帖子杂志新闻博客评论等
  section:页面中某段文字,或文章中某段文字
  aside:侧边栏
-->

<!--其实这六个标签就是有语义的div-->

<!--头部-->
<header>
  <h1>尚品汇</h1>
</header>
<!--主导航-->
<nav>
  <a href="#">首页</a>
  <a href="#">订单</a>
  <a href="#">购物车</a>
  <a href="#">我的</a>
</nav>
<!--主要内容-->
<div class="page-content" style="background: green">
  文章区开始
<!--  文章-->
  <article style="background-color: orange">
    <h2>&lt;&lt;如何一夜暴富&gt;&gt;</h2>
    section段落开始
    <section style="background: skyblue">
      <h3>第一种方式:通过做梦</h3>
      做梦可以实现暴富
    </section>
    section段落结束
    <section style="background: red">
      <h3>第二种方式:通过买彩票</h3>
      买彩票可以实现暴富
    </section>
    <section>
      <h3>第三种方式:通过学习前端</h3>
      学习前端可以实现暴富
    </section>
  </article>
  文章区结束 <br>
<!--  侧边栏导航-->
  侧边栏开始
  <aside style="background: gray">
    <nav>
      <ul>
        <li><a href="#">买啥</a></li>
        <li><a href="#">会员</a></li>
        <li><a href="#">秒杀</a></li>
        <li><a href="#">优惠卷</a></li>
      </ul>
    </nav>
  </aside>
  侧边栏结束 <br>
</div>
<!--  页脚-->
页脚开始
<footer style="background: blueviolet">
  <nav><a href="#">友情链接</a></nav>
</footer>
页脚结束
</body>
</html>